<template>
	<a-form :model="formState" :rules="rules" ref="formRef">
		<div class="items">
			<div style="width:100%">
				<p>账号<span class="my_required">*</span></p>
				<a-form-item name="account">
					<MyInput :modelV="formState.account" @submit="formState.account = $event" :maxlength="12" :disabled="formState.id"/>
				</a-form-item>
			</div>
		</div>
		<div class="items">
			<div style="width:100%">
				<p>密码</p>
				<a-form-item name="password">
					<MyInput :modelV="formState.password" @submit="formState.password = $event" :maxlength="11" />
				</a-form-item>
			</div>
		</div>
		<div class="items">
			<div style="width:100%">
				<p>姓名<span class="my_required">*</span></p>
				<a-form-item name="realName">
					<MyInput :modelV="formState.realName" @submit="formState.realName = $event" :maxlength="12" />
				</a-form-item>
			</div>
		</div>
		<div class="items">
			<div style="width:100%">
				<p>手机号<span class="my_required">*</span></p>
				<a-form-item name="mobile">
					<MyInput :modelV="formState.mobile" @submit="formState.mobile = $event" :maxlength="11" />
				</a-form-item>
			</div>
		</div>
		<div class="bottom-btn">
			<MyButton class="reaset" @click="$emit('onReset')" title="取消" />
			<MyButton class="submit" @click="handleSubmit" title="保存" />
		</div>
	</a-form>
</template>

<script lang="ts" setup>
	import { ref, watch,computed } from "vue";
	import { useOrganization } from "@/store";
	import cloneDeep from 'lodash/cloneDeep';
	import debounce from "@/utils/debounce";
	import message from "@/utils/message";
	import { PhoneValidation } from "@/utils/validation/customValidation";
	import { createAdmin, updateAdmin } from "@/api/orang";
	
	const PROPS = defineProps({
		currentInfo: {
			type: Object,
			default() {
				return {};
			},
		},
	});
	const OrganStore = useOrganization();
	const PATIENTEMIT = defineEmits(["onSubmit"]);
	const departSelectList = computed(()=> OrganStore.$state.departSelectList.filter((item)=> item.value != PROPS.currentInfo.id) );
	
	const formRef = ref();
	const formState = ref < any > ({});
	const rules = {
		account: [{trigger: 'blur',message: "请输入账号"}],
		realName: [{trigger: 'blur',message: "请输入姓名"}],
		mobile: [{trigger: 'blur',validator: PhoneValidation}],
	};
	
	const handleSubmit = debounce(()=>{
		formRef.value.validate().then(async (values: any) => {
			if(formState.value.id){
				const result = await updateAdmin(formState.value);
				if (!result) return;
				message.success('修改人员成功');
				PATIENTEMIT("onSubmit");
			}else{
				const result = await createAdmin(formState.value);
				if (!result) return;
				message.success('新增人员成功');
				PATIENTEMIT("onSubmit");
			}
		});
	},50);
	
	watch(()=>PROPS.currentInfo,(obj)=>{
		formState.value = cloneDeep(obj);
	},{ immediate:true });
	
</script>

<style lang="less" scoped>
	.items{
		display: flex;
		// height:60px;
		align-items: center;
		>div{
			display: flex;
			align-items: center;
			margin-top:20px;
			margin-right:15px;
			>p:nth-of-type(1){
				margin-right:10px;
				width:5em;
				text-align: right;
			}
		}
	}
	.my_required{
		color: #ff4d4f;
		font-size: 12px;
		font-family: SimSun, sans-serif;
		line-height: 1;
		margin-left: 6px;
	}
	.reaset,.submit{
		width:20%;
	}
</style>